<template>
    <section
        :style="{
            paddingTop: confDiy.paddingTop + 'px',
            paddingBottom: confDiy.paddingBottom + 'px',
            marginTop: confDiy.marginTop + 'px',
            marginBottom: confDiy.marginBottom + 'px',
            background: `linear-gradient(
                ${confDiy.bgEdg}deg,
                ${confDiy.bgColorOne},
                ${confDiy.bgColorTow},
                ${confDiy.bgColorThree})`
        }"
    >
        <div class="m-auto px-10">
            <div
                v-if="confDiy.title || confDiy.intro"
                class="flex flex-col gap-1.5"
                :style="{ marginBottom: confDiy.headerBottom + 'px' }"
            >
                <h3
                    v-if="confDiy.title"
                    class="text-center text-7xl font-bold"
                    :style="{ color: confDiy.titleColor }"
                >
                    {{ confDiy.title }}
                </h3>

                <p
                    v-if="confDiy.intro"
                    class="text-center"
                    :style="{ color: confDiy.introColor }"
                >
                    {{ confDiy.intro }}
                </p>
            </div>

            <div
                v-for="(item, index) in dataDiy"
                :key="index"
                class="rounded-xl"
                :style="{
                    backgroundColor: item.bgColor,
                    borderRadius: item.brRadius + 'px',
                    padding: item.padding + 'px'
                }"
            >
                <img
                    :src="appStore.toAbsoluteUrl(item.url)"
                    class="max-w-full max-h-full"
                    alt="img"
                />
            </div>
        </div>
    </section>
</template>

<script setup lang="ts">
import type { ImagesConfigType, ImagesDataType } from '../index.ts'
import useAppStore from '@/stores/modules/app'

const props = defineProps({
    diyData: {
        type: Object,
        default: () => ({
            config: {} as ImagesConfigType,
            data: [] as ImagesDataType[]
        })
    }
})

const appStore = useAppStore()

// 装修数据
const confDiy = ref({} as ImagesConfigType)
const dataDiy = ref([] as ImagesDataType[])

// 监听数据
watch(
    () => props.diyData,
    (val) => {
        confDiy.value = val.config
        dataDiy.value = val.data
    }, { immediate: true }
)
</script>

<!--<style scoped lang="scss">-->
<!--.card {-->
<!--    display: flex;-->
<!--    flex-direction: column;-->
<!--    align-items: center;-->
<!--    padding: 40px;-->
<!--    text-align: center;-->
<!--    cursor: pointer;-->
<!--    transition: all 0.5s;-->
<!--    &:hover {-->
<!--        transform: translateY(-10px);-->
<!--    }-->
<!--}-->
<!--</style>-->
